<template>
    <div>
        <input type="text" v-model="state.rphone" />
        <input type="button" value="添加" @click="" />
        <table>
            <tr>
                <td>名称</td>
                <td>电话</td>
                <td>单价</td>
                <td>积分</td>
                <td>图片</td>
                <td>性别</td>
                <td>时间</td>
                <td>状态</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.rname }}</td>
                <td>{{ item.rphone }}</td>
                <td>{{ item.rprice }}</td>
                <td>{{ item.rjifen }}</td>
                <td>
                    <img :src="item.rimage" alt="" width="50px" height="50px">
                </td>
                <td>{{ item.rsex }}</td>
                <td>{{ item.rdate }}</td>
                <td>{{ item.rxiustate }}</td>
            </tr>
        </table>
        <a>
            每页显示{{ state.size }} 当前第{{ state.index }} 共{{ pcount }}页 共{{ count }}条
            <input type="button" value="首页" @click="fenye(0)">
            <input type="button" value="上一页" @click="fenye(-1)">
            <input type="button" value="下一页" @click="fenye(1)">
            <input type="button" value="尾页" @click="fenye(9)">
        </a>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()
const data = reactive({
    state: {

        rphone: '',
        index: 1,
        size: 2,

    },
    list: [],
    pcount: 0,
    count: 0,
})
const { state, list, pcount, count } = toRefs(data)


onMounted(() => {
    showPropers
})
const showPropers = () => {
    axios({
        url: 'https://localhost:7022/api/Propers/ShowProprts',
        method: 'get',
        data: state.value


    }).then((res) => {
        list.value = res.data.data
        pcount.value = res.data.pcount
        count.value = res.data.count
    })
}

const fenye = (i: number) => {
    if (i == 0) {
        state.value.index = 1
    }
    if (i == -1 || i == 1) {
        if (i == -1 && state.value.index == 1) {
            return

        }
    }
}


</script>

<style scoped></style>